<!DOCTYPE html>

<meta charset="utf-8" />

<title>WebSocket Test</title>
<script language="javascript" type="text/javascript">
    function randomString(len) {
        var chars = 'qwertyuiopasdfghjklzxcvbnm1234567890';
        var maxPos = chars.length;
        var pwd = '';
        for (i = 0; i < len; i++) {
            pwd += chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
    };

    function init() {
        document.myform.url.value = "ws://192.168.1.113:8888/"
        document.myform.inputtext.value = JSON.stringify({
            timestamp: new Date().getTime(),
            nonce: randomString(12),
        });
        document.myform.disconnectButton.disabled = true;
    }

    function doConnect() {
        websocket = new WebSocket(document.myform.url.value);
        websocket.onopen = function(evt) {
            onOpen(evt)
        };
        websocket.onclose = function(evt) {
            onClose(evt)
        };
        websocket.onmessage = function(evt) {
            onMessage(evt)
        };
        websocket.onerror = function(evt) {
            onError(evt)
        };
    }

    function onOpen(evt) {
        writeToScreen("connected\n");
        document.myform.connectButton.disabled = true;
        document.myform.disconnectButton.disabled = false;
    }

    function onClose(evt) {
        writeToScreen("disconnected\n");
        document.myform.connectButton.disabled = false;
        document.myform.disconnectButton.disabled = true;
    }

    function onMessage(evt) {
        writeToScreen("response: " + evt.data + '\n');
    }

    function onError(evt) {
        writeToScreen('error: ' + evt.data + '\n');

        websocket.close();

        document.myform.connectButton.disabled = false;
        document.myform.disconnectButton.disabled = true;

    }

    function doSend(message) {
        writeToScreen("sent: " + message + '\n');
        websocket.send(message);
    }

    function writeToScreen(message) {
        document.myform.outputtext.value += message
        document.myform.outputtext.scrollTop = document.myform.outputtext.scrollHeight;

    }

    window.addEventListener("load", init, false);


    function sendText() {
        doSend(document.myform.inputtext.value);
    }

    function clearText() {
        document.myform.outputtext.value = "";
    }

    function doDisconnect() {
        websocket.close();
    }
</script>

<div id="output"></div>

<form name="myform">
    <p>
        <textarea name="outputtext" rows="20" style="width:80%"></textarea>
    </p>
    <p>
        <textarea name="inputtext" cols="50"></textarea>
    </p>
    <p>
        <textarea name="url" cols="50"></textarea>
    </p>
    <p>
        <input type="button" name=sendButton value="Send" onClick="sendText();">
        <input type="button" name=clearButton value="Clear" onClick="clearText();">
        <input type="button" name=disconnectButton value="Disconnect" onClick="doDisconnect();">
        <input type="button" name=connectButton value="Connect" onClick="doConnect();">
    </p>


</form>

</html>
